<template>
  <div class="params">
    <el-row>
      <el-col :xs="24" :sm="24" class="params_list">

        <!-- <div class="wrapping">
          <el-select v-model="form.level" :size="formSize" clearable placeholder="星级">
            <el-option v-for="item in startOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div> -->
        <!-- <div class="wrapping">
          <el-select v-model="form.call" :size="formSize" clearable placeholder="通话状态">
            <el-option v-for="item in passOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div> -->
        <!-- <div class="wrapping">
          <el-select v-model="form.fit" :size="formSize" clearable placeholder="是否有效">
            <el-option v-for="item in effectiveOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div> -->
        <div class="wrapping">
          <media-select v-model="form.media" :size="formSize" multiple collapse-tags />
        </div>
        <div class="wrapping">
          <channel-select v-model="form.channels" :size="formSize" multiple collapse-tags />
        </div>
        <div class="wrapping">
          <el-select v-model="shopId" :size="formSize" @change="shopSelectChange" filterable placeholder="门店">
            <el-option v-for="item in shopOptionList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="wrapping">
          <el-select v-model="teamId" :size="formSize" :loading="teamSelectLoading" @change="teamSelectChange" filterable placeholder="团队">
            <el-option v-for="item in teamOptionList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="wrapping">
          <el-select v-model="employeeId" :size="formSize" :loading="employeeSelectLoading" filterable placeholder="员工">
            <el-option v-for="item in employeeOptionList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <!-- <div class="wrapping">
          <el-select v-model="channelId" :size="formSize" filterable placeholder="渠道">
            <el-option v-for="item in channelList" :key="item.id" :label="item.nickname" :value="item.id">
            </el-option>
          </el-select>
        </div> -->

        <div class="wrapping">
          <el-input placeholder="城市" :size="formSize" v-model="form.city" />
        </div>
        <div class="wrapping">
          <el-input placeholder="姓名" :size="formSize" v-model="form.name" />
        </div>
        <div class="wrapping">
          <el-input placeholder="电话" :size="formSize" v-model="form.mobile" />
        </div>
        <field-select :form.sync="form" />
        <!-- <div v-for="(fieldItem, fieldIndex) in fieldList" :key="fieldIndex" class="wrapping">
          <div v-if="fieldItem.type === 2">
            <el-select v-model="fieldItem.value1" :size="formSize" clearable :placeholder="fieldItem.fieldName">
              <el-option v-for="item in fieldItem.value" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div v-else>
            <el-input v-model="fieldItem.value1" :size="formSize" :placeholder="fieldItem.fieldName"></el-input>
          </div>
        </div> -->
        <div class="wrapping">
          <follow-status v-model="form.progress"></follow-status>
        </div>
        <div class="dateWrapping">
          <el-date-picker v-model="timeSlot" :size="formSize" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" />
        </div>
        <div class="dateWrapping">
          <label-select v-model="form.label"></label-select>
        </div>
        <el-select v-model="form.publicPool" :size="formSize" placeholder="是否公共池客户">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
        <el-input placeholder="未跟进天数" :size="formSize" v-model="form.followDayCount" style="width: 200px;" class="ml-2"></el-input>
        <div class="dateWrapping">
          <el-input placeholder="跟进次数" :size="formSize" v-model="form.remarkCount" class="ml-2"></el-input>
        </div>
        <el-button-group class="ml-2">
          <el-button icon="el-icon-refresh" type="primary" :size="formSize" @click="resetForm">重置查询条件</el-button>
          <el-button icon="el-icon-search" :size="formSize" type="primary" @click="search">查询</el-button>
        </el-button-group>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :xs="24" :sm="24">
        <div v-for="(fieldItem,fieldIndex) in fieldList" :key="fieldIndex" class="wrapping">
          <div v-if="fieldItem.type===2">
            <el-select v-model="fieldItem.value1" :size="formSize" clearable :placeholder="fieldItem.fieldName">
              <el-option v-for="item in fieldItem.value" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div v-else>
            <el-input v-model="fieldItem.value1" :size="formSize" :placeholder="fieldItem.fieldName"></el-input>
          </div>
        </div>
      </el-col>
    </el-row> -->
    <!-- <el-row>
      <el-col :xs="24" :sm="24">
        
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import {
  followUpOptions,
  startOptions,
  passOptions,
  effectiveOptions
} from './config'
import { shopList, allTeamList, getEmployee } from '@/api/customer'
import { getAllChannelList } from '@/api/channel/index'
import { mapState } from 'vuex'
import { GETCUSTOMERSTATUS } from '@/api/customer'
import LabelSelect from "@/components/labels";
import FollowStatus from '@/components/follow/status'
export default {
  components: {
    LabelSelect,
    FollowStatus
  },
  data() {
    return {
      followUpOptions,
      startOptions,
      passOptions,
      effectiveOptions: effectiveOptions,
      timeSlot: '',
      form: {
        level: '',
        call: '',
        fit: '',
        progress: '',
        city: '',
        name: '',
        mobile: '',
        publicPool: '',
        followDayCount: ''
      },
      fieldList: [],
      shopId: '',
      teamId: '',
      employeeId: '',
      channelId: '',
      shopOptionList: [],
      teamOptionList: [],
      employeeOptionList: [],
      channelList: [],
      teamSelectLoading: false,
      employeeSelectLoading: false,
      formSize: 'small',
      statusList: []
    }
  },

  mounted() {
    this.shopList()
    this.getAllChannelList()
    this.search()
    this.fieldList = JSON.parse(JSON.stringify(this.fieldList1))
    //this.getStatus()
  },
  computed: {
    ...mapState({
      fieldList1: (state) => state.myClient.fieldList
    })
  },
  watch: {
    fieldList1(val) {
      this.fieldList = JSON.parse(JSON.stringify(val))
    }
  },
  methods: {
    shopList() {
      shopList().then((res) => {
        this.shopOptionList = res.data
      })
    },
    async shopSelectChange() {
      this.teamSelectLoading = true
      this.teamId = ''
      this.employeeId = ''
      try {
        await allTeamList({ shopId: this.shopId }).then((res) => {
          this.teamOptionList = res.data || []
        })
        this.teamSelectLoading = false
      } catch (error) {
        this.teamSelectLoading = false
      }
    },
    async teamSelectChange() {
      this.employeeSelectLoading = true
      this.employeeId = ''
      try {
        await getEmployee({ shopId: this.shopId, teamId: this.teamId }).then(
          (res) => {
            this.employeeOptionList = res.data || []
          }
        )
        this.employeeSelectLoading = false
      } catch (error) {
        this.employeeSelectLoading = false
      }
    },
    search() {
      const form = Object.assign(
        {
          shopId: this.shopId,
          teamId: this.teamId,
          employeeId: this.employeeId,
          channelId: this.channelId
        },
        this.form
      )
      this.fieldList.forEach((element, index) => {
        form['field' + (index + 1)] = element.value1
      })
      if (this.timeSlot) {
        form.startDate = this.timeSlot[0]
        form.endDate = this.timeSlot[1]
      }
      this.$emit('search', form)
    },
    resetForm() {
      for (const key in this.form) {
        if (Object.hasOwnProperty.call(this.form, key)) {
          this.form[key] = ''
        }
      }
      this.timeSlot = ''
      this.fieldList.forEach((element) => {
        element.value1 = ''
      })
      this.shopId = ''
      this.teamId = ''
      this.employeeId = ''
    },
    async getAllChannelList() {
      try {
        await getAllChannelList().then((res) => {
          this.channelList = res.data
        })
      } catch (error) { }
    },
    // 获取状态
    getStatus() {
      GETCUSTOMERSTATUS().then((res) => {
        this.statusList = res.data || []
      })
    },

    // 设置参数
    setParams(id, value) {
      this.$set(this.form, id, value)
    }

  }
}
</script>

<style lang="scss" scoped>
.params {
  padding-top: 20px;

  .wrapping {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
